<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #4792a4, #d1e9b8);
      }
      body {
        display: flex;
      }
      .inner {
        margin: 30px;
      }
      input {
        padding-left: 10px;
        width: 130px;
        height: 30px;
        border-radius: 5px;
      }
      table {
        width: 600px;
        text-align: center;
        border-collapse: collapse;
        margin-left: 30px;
      }
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      td,
      th {
        padding: 10px 0;
        width: 190px;
      }
      .right {
        margin: 30px;
        height: 560px;
        flex: 1;
        border: 1px solid #000;
        /* background: red; */
      }
      .right #first {
        height: 50%;
        /* background-color: blue; */
        margin-bottom: 30px;
      }
      .right #last {
        height: 50%;
        /* background-color: pink; */
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="inner">
        姓名 &nbsp;<input type="text" placeholder="请输入姓名" id="name" /> 评分
        &nbsp;<input type="number" placeholder="请输入评分" id="score" /> 薪资
        &nbsp;<input type="number" placeholder="请输入薪资" id="income" />
        <a href="#"
          ><input
            type="button"
            value="添加"
            style="
              background: mediumseagreen;
              width: 55px;
              padding: 0;
              text-align: center;
            "
        /></a>
      </div>

      <div>
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>评分</th>
              <th>薪资</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr><td>1</td><td>2</td><td>3</td></tr> -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="right">
      <div id="first"></div>

      <div id="last"></div>
    </div>
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./echarts-5.1.2/dist/echarts.min.js"></script>
    <script>
      let data = [];
      let obj = {};
      let name = document.getElementById("name");
      let score = document.getElementById("score");
      let income = document.getElementById("income");
      let a = document.querySelector("a");
      let tbody = document.querySelector("tbody");

      a.addEventListener("click", function () {
        obj.name = name.value;
        obj.score = score.value;
        obj.income = income.value;
        data.push(obj);
        let tr = document.createElement("tr");
        tbody.appendChild(tr);
        for (let i = 0; i < data.length; i++) {
          tr.innerHTML = `
        <tr>
          <td>${data[i].name}</td>
          <td>${data[i].score}</td>
          <td>${data[i].income}</td>
          </tr>
        `;
        function first() {
        let myChart = echarts.init(document.getElementById("first"));
        option = {
        xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [`${data[i].name}`],
    },
       yAxis: {
        type: 'value'
    },
      series: [{
        data: [`${data[i].score}`],
        type: 'line',
        areaStyle: {}
    }]
};
      myChart.setOption(option);
        }
        first() ; 

         // 1.基于准备好的dom，初始化echarts实例
      function last() {
        let myChart = echarts.init(document.getElementById("last"));

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: "薪资",
          },
          xAxis /* X轴 */: {
            name: "姓名",
            data: [`${data[i].name}`],
          },
          yAxis: /* y轴 */ {},
          series: [
            {
              name: "薪资",
              type: "bar",
              //type 图的类型  bar-柱状图  line-折线图  pie-饼状图
              data: [`${data[i].income}`],
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      last();
        }
      });
    

     

      // let data = [
      // {},
      // {}

      // ]

      // //这是一个点击事件
      // // 每点击一次向obj对象中赋值
      // // 并且向data中向后追加
      // function (){
      //   let obj = {
      // }
      // obj.username=input.value
      // data.push(obj)
      // }
    </script>
  </body>
</html>
